import { ReactNode } from 'react'
import type { CenterPopupProps } from '../CenterPopup'
import type { ButtonProps } from '../Button'
import type { NativeProps } from '../../utils/native-props'
import type { ImperativeHandler } from '../../utils/render-imperatively'

export type Action = {
  /** 文字是否加粗 */
  bold?: boolean
  /** 是否为禁用状态 */
  disabled?: boolean
  /** 唯一标识 */
  key: string | number
  /** 点击时触发 */
  onClick?: () => void | Promise<void>
  /** 文字 */
  text: ReactNode
  /** 按钮类型. default: `primary` */
  pattern?: ButtonProps['pattern']
} & NativeProps

export type DialogProps = Pick<
  CenterPopupProps,
  | 'afterClose'
  | 'afterShow'
  | 'bodyClassName'
  | 'bodyStyle'
  | 'closeOnMaskClick'
  | 'destroyOnClose'
  | 'forceRender'
  | 'getContainer'
  | 'maskClassName'
  | 'maskStyle'
  | 'onClose'
  | 'stopPropagation'
  | 'visible'
> & {
  /** 操作按钮列表，可以传入二级数组来实现同一行内并排多个按钮. default: [] */
  actions?: (Action | Action[])[]
  /** 点击操作按钮后是否触发onClose. default: false */
  closeOnAction?: boolean
  /** 对话框内容. default: - */
  content?: ReactNode
  /** 顶部区域. default: - */
  header?: ReactNode
  /** 图片 url. default: - */
  image?: string
  /** 点击操作按钮时触发. default: - */
  onAction?: (action: Action, index: number) => void | Promise<void>
  /** 对话框标题. default: - */
  title?: ReactNode
} & NativeProps<
  /** dialog z-index. default: `1000`. globalVariable: --rt-dialog-z-index */
  | '---z-index'
>

export type DialogShowProps = Omit<
  DialogProps,
  'visible' | 'destroyOnClose' | 'forceRender'
>

export type DialogShowHandler = Pick<ImperativeHandler, 'close'>

export type DialogAlertProps = Omit<
  DialogProps,
  'visible' | 'closeOnAction' | 'actions' | 'forceRender' | 'destroyOnClose'
> & {
  /** 确认按钮的内容. default: `t('common.gallery.Dialog.confirmText')` */
  confirmText?: ReactNode
  /** 是否为禁用状态. default: - */
  disabled?: boolean
  /** 点击确认按钮时触发 */
  onConfirm?: (...args: any[]) => void | Promise<void>
}

export type DialogConfirmProps = Omit<
  DialogProps,
  'visible' | 'closeOnAction' | 'actions' | 'forceRender' | 'destroyOnClose'
> & {
  /** 确认按钮内容 */
  confirmText?: ReactNode
  /** 取消按钮内容 */
  cancelText?: ReactNode
  /** 是否禁用确认按钮. default: - */
  disabledConfirm?: boolean
  /** 是否禁用取消按钮. default: - */
  disabledCancle?: boolean
  /** 点击确认按钮时触发 */
  onConfirm?: () => void | Promise<void>
  /** 点击取消按钮时触发 */
  onCancel?: () => void | Promise<void>
}
